// 声明全局变量
var index = 0,//当前显示图片的索引，默认值为0
    main  = byId("main"),
    prev  = byId("prev"),//上一张
    next  = byId("next"),//下一张
    pics  = byId("banner").getElementsByTagName("div"),
    dots  = byId("dots").getElementsByTagName("span"),
    menuContent = byId("menu-content"),
    menuItems = menuContent.getElementsByTagName("menu-item"),
    timer = null,//定时器
    size  = pics.length;

//封装getElemenById（）
function byId(id) {
    return typeof(id)==="string"?document.getElementById(id):id;
}
//封装浏览器兼容事件
function addHandler(element, type, handler) {
    //element:事件对象
    //type:事件类型
    //handler:事件句柄
    if (element.addEventListener) { //判断浏览器是否支持该语句（chrome/opera/IE9支持）
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) { //判断浏览器是否支持该语句（IE8及以下版本支持）IE支持DOM2事件
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] =handler;//以上两种都不支持时，执行DOM0级事件
    }
};
//自动轮播
function startAutoPlay(){
    timer = setInterval(function(){
        index++;
        if(index>=size) index = 0;
        changeImg();
    },3000)
}
//清除定时器，停止自动轮播
function stopAutoPlay(){
    if(timer){
        clearInterval(timer);
    }
}
//切换图片
function changeImg(){
    //遍历所有图片，将图片隐藏，将圆点上的类清除
    for(var i=0;i<size;i++){
        pics[i].style.display="none";
        dots[i].className="";
    }
    pics[index].style.display="block";
    dots[index].className="active";
    
}
//下一页
addHandler(next,"click",function(){
    index++;
    if(index>=size) index=0;
    changeImg();
});
//上一页
addHandler(prev,"click",function(){
    index--;
    if(index<0) index=size-1;
    changeImg();
});

//鼠标滑过主菜单
for(var m=0,mlen=menuItems.length;m<mlen;m++){
    addHandler(menuItems[m],"mouseover",function(){
        alert("m")
    })
}
//点击圆点索引切换图片
for(var d=0;d<size;d++){
    dots[d].setAttribute("data-id",d);
    addHandler(dots[d],"click",function(){
        index=this.getAttribute("data-id");
        changeImg();
    })
}

//开启自动轮播
startAutoPlay();
//鼠标滑入main,停止轮播
addHandler(main,"mouseover",stopAutoPlay);
//鼠标离开main,开启轮播
addHandler(main,"mouseout",startAutoPlay);